<template>
  <HomePanel title="热门品牌" sub-title="国际经典 品质保障">
  <template #main>
    <ul class="brand-list">
      <li v-for="item in brandData" :key="item.id">
        <img :src="item.picture" alt="">
      </li>
    </ul>
  </template>
</HomePanel>
</template>

<script>
import HomePanel from './home-panel'
import { findBrand } from '@/api/home'
import { ref } from 'vue'
export default {
  name: 'HomeFind',
  components: { HomePanel },
  setup () {
    const brandData = ref([])

    async function getList () {
      const data = await findBrand()
      console.log(data)
      brandData.value = data.result
    }
    getList()

    return {
      brandData
    }
  }

}
</script>

<style scoped lang='less'>
.brand-list{
  display: flex;
  li{
    flex:1;
    padding: 10px;
  }
}
</style>
